function main() {

    var canvas = document.getElementById('android3D');


    var gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    canvas.width = window.innerWidth - 30;
    canvas.height = window.innerHeight - 30;
    X_SCALE = canvas.height / canvas.width;

    gl.viewport(0, 0, canvas.width, canvas.height);


    setEye(0, 2, 20);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    // rotateMe(gl);
    // rotateEye(gl);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    drawAndroid3D([0, 0, 0, 1], [0, 1, 0], [0, 0, 1], gl);
    /**
     * 可用方向键控制，左右方向，上下前后移动
     */
    document.onkeydown = function (ev) {
        keydown(ev, gl);
    };
}


var X_SCALE = 1; //缩放系数，适应画布的变化

var rotate_key = 0; //键盘改变身体的朝向的角度
var center_vertice = new Array(0, 0, 0, 1); //键盘改变的位置

var key_armL_rotateA = 0; //键盘改变的左胳膊的角度
var key_armR_rotateA = 0; //键盘改变的右胳膊的角度
/**
 * 键盘监听函数
 * 方向键上：向前走
 * 方向键下：向后走
 * 方向键右：向右转一定角度
 * 方向键左：向左转动一定角度
 * 数字键1：右胳膊向上转
 * 数字键2：右胳膊向下转
 * 数字键3：左胳膊向上转
 * 数字键4：左胳膊向下转
 */
function keydown(ev, gl) {
    if (ev.keyCode == 37) { // left
        rotate_key += Math.PI / 30;
    } else
    if (ev.keyCode == 39) { // right
        rotate_key -= Math.PI / 30;

    } else
    if (ev.keyCode == 38) { // up
        center_vertice[0] += Math.sin(rotate_key);
        center_vertice[2] += Math.cos(rotate_key);

    } else
    if (ev.keyCode == 40) { // down
        center_vertice[0] -= Math.sin(rotate_key);
        center_vertice[2] -= Math.cos(rotate_key);

    } else
    if (ev.keyCode == 49) { // 1
        key_armR_rotateA += Math.PI / 30;
    } else
    if (ev.keyCode == 50) { // 2
        key_armR_rotateA -= Math.PI / 30;

    } else
    if (ev.keyCode == 51) { // 3
        key_armL_rotateA += Math.PI / 30;

    } else
    if (ev.keyCode == 52) { // 4
        key_armL_rotateA -= Math.PI / 30;

    } else {
        return;
    }
    setArmL(key_armL_rotateA);
    setArmR(key_armR_rotateA);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    drawAndroid3D(center_vertice, [0, 1, 0], new Array(Math.sin(rotate_key), 0, Math.cos(rotate_key)), gl);
}

function rotateMe(gl) {
    var i = 0;
    var tick = function () {
        var a = i * Math.PI / 30;
        i++;
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        drawAndroid3D([0, 0, 0, 1], [0, 1, 0], new Array(Math.sin(a), 0, Math.cos(a)), gl);
        requestAnimationFrame(tick); // Request that the browser ?calls tick
    };
    tick();
}

function rotateEye(gl) {
    var i = 0;
    var tick = function () {
        var a = i * Math.PI / 30;
        i++;
        setEye(20 * Math.sin(a), 2, 20 * Math.cos(a));
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        drawAndroid3D([0, 0, 0, 1], [0, 1, 0], [0, 0, 1], gl);
        requestAnimationFrame(tick); // Request that the browser ?calls tick
    };
    tick();
}


var ARMLY = 0,
    ARMLZ = 0,
    ARMRY = 0,
    ARMRZ = 0;

function setArmL(rotateA) {
    ARMLY = 1.9 * (1 - Math.cos(rotateA));
    ARMLZ = 1.9 * Math.sin(rotateA);
}

function setArmR(rotateA) {
    ARMRY = 1.9 * (1 - Math.cos(rotateA));
    ARMRZ = 1.9 * Math.sin(rotateA);
}

/**
 * 画出安卓机器人
 */
function drawAndroid3D(vertice, atUp, atFront, gl) {
    /**
     * bodyH 身体高度
     * armH 胳膊高
     * legH 腿高
     */
    var bodyH = 3,
        armH = 1.9,
        legH = 1.2;
    /**
     * bodyR 身体半径
     * alR 腿和胳膊的半径
     */
    var bodyR = 1.5,
        alR = 0.3,
        EYE_R = 0.1;


    calMatrix(vertice, atUp, atFront);


    var body1 = new Array(0.0, bodyH / 2, 0.0, 1.0);
    var body2 = new Array(0.0, (-1) * bodyH / 2, 0.0, 1.0);
    var armL1 = new Array(1.9, (bodyH / 2) - 0.3, 0.0, 1.0);
    var armL2 = new Array(1.9, (bodyH / 2) - 0.3 - armH + ARMLY, ARMLZ, 1.0);
    var armR1 = new Array(-1.9, (bodyH / 2) - 0.3, 0.0, 1.0);
    var armR2 = new Array(-1.9, (bodyH / 2) - 0.3 - armH + ARMRY, ARMRZ, 1.0);
    var legL1 = new Array(0.6, (-1) * bodyH / 2, 0.0, 1.0);
    var legL2 = new Array(0.6, (-1) * bodyH / 2 - legH, 0.0, 1.0);
    var legR1 = new Array(-0.6, (-1) * bodyH / 2, 0.0, 1.0);
    var legR2 = new Array(-0.6, (-1) * bodyH / 2 - legH, 0.0, 1.0);
    var head = new Array(0.0, bodyH / 2 + 0.1, 0.0, 1.0);


    var EYE_A1 = Math.PI / 8;
    var EYE_A2 = Math.PI / 8;
    var eyeY = bodyR * Math.sin(EYE_A1);
    var eyeX = bodyR * Math.cos(EYE_A1) * Math.sin(EYE_A2);
    var eyeZ = bodyR * Math.cos(EYE_A1) * Math.cos(EYE_A2);

    var eyeL = new Array(head[0] + eyeX, head[1] + eyeY, head[2] + eyeZ, 1.0);
    var eyeR = new Array(head[0] - eyeX, head[1] + eyeY, head[2] + eyeZ, 1.0);

    var colorEye = new Array(0, 1, 0);
    var colorHead = new Array(0xEA / 0xFF, 0x43 / 0xFF, 0x35 / 0xFF);
    var colorBody = new Array(251 / 0xFF, 188 / 0xFF, 5 / 0xFF);
    var colorArm = new Array(52 / 0xFF, 168 / 0xFF, 83 / 0xFF);
    var colorLeg = new Array(66 / 0xFF, 133 / 0xFF, 244 / 0xFF);

    // var colorHead = new Array(0, 1, 0);
    // var colorBody = new Array(0, 1, 0);
    // var colorArm = new Array(0, 1, 0);
    // var colorLeg = new Array(0, 1, 0);

    drawBall(head, [0, 1, 0], 0.5, bodyR, colorHead, gl);
    drawBall(eyeL, [0, 1, 0], 1, EYE_R, colorEye, gl);
    drawBall(eyeR, [0, 1, 0], 1, EYE_R, colorEye, gl);

    drawCylinder(body1, body2, bodyR, colorBody, gl);

    drawCylinder(armL1, armL2, alR, colorArm, gl);
    drawCylinder(armR1, armR2, alR, colorArm, gl);

    drawCylinder(legL1, legL2, alR, colorLeg, gl);
    drawCylinder(legR1, legR2, alR, colorLeg, gl);
}


function calMatrix(vertice, atUp, atFront) {
    var modelMatrix = new Matrix4();
    var a_zx;
    var a_z;;
    if (atUp[0] == 0) {
        a_zx = Math.PI / 2;
        if (atUp[2] < 0) {
            a_zx = a_zx * (-1);
        }
    } else {
        if (atUp[2] == 0) {
            if (atUp[0] > 0) {
                a_zx = 0;
            } else {
                a_zx = Math.PI;
            }

        } else {
            a_zx = Math.atan(atUp[2] / atUp[0]);
            if (atUp[0] < 0) {
                a_zx += Math.PI;
            }
        }
    }

    var x_y_z = Math.sqrt(atUp[0] * atUp[0] + atUp[1] * atUp[1] + atUp[2] * atUp[2]);
    if (atUp[1] == 0) {
        a_z = Math.PI / 2;
    } else {
        a_z = Math.acos(atUp[1] / x_y_z);
    }


    var a_rY;
    if (atFront[2] == 0) {
        a_rY = Math.PI / 2;
        if (atFront[0] < 0) {
            a_rY *= -1;
        }
    } else {
        if (atFront[0] == 0) {
            if (atFront[2] < 0) {
                a_rY = Math.PI;
            } else {
                a_rY = 0;
            }
        } else {
            a_rY = Math.atan(atFront[0] / atFront[2]);
            if (atFront[2] < 0) {
                a_rY += Math.PI;
            }
        }
    }

    modelMatrix.setScale(X_SCALE, 1, 1);
    // modelMatrix.setTranslate(vertice[0], vertice[1], vertice[2]);
    modelMatrix.translate(vertice[0], vertice[1], vertice[2]);

    modelMatrix.rotate(180 * a_zx / Math.PI, 0, 1, 0);
    modelMatrix.rotate(180 * a_z / Math.PI, 0, 0, 1);
    modelMatrix.rotate((-1) * 180 * a_zx / Math.PI, 0, 1, 0);

    modelMatrix.rotate(180 * a_rY / Math.PI, 0, 1, 0);

    setModelMatrix(modelMatrix);
}